<template>
  <div class="left-container">
    <h2 ref="h2">Left</h2>
    <p ref="p">{{age}} </p>
    <button @click="age++">+1</button>
    <art-list ref="artlistRef"></art-list>
  </div>
</template>

<script>
import ArtList from '@/components/ArtList.vue'
export default {
  components: {
    ArtList
  },
  data(){
    return{
      age:20
    }
  },
  // // 第一个钩子函数
  // beforeCreate() {
  //   console.log('beforeCreate',this.age);
  // },

  // // 第二个钩子函数
  // created() {
  //   console.log('created',this.age);
  // },
  // // 第三个钩子函数
  // beforeMount(){
  //   console.log('beforeMount',this.$refs.h2);
  // },
  // // 第四个钩子函数
  // mounted(){
  //   console.log('mounted',this.$refs.h2);
  // },
  // // 第五个构造函数
  // beforeUpdate(){
  //   console.log('beforeUpdate',this.age,this.$refs.p.innerHTML);
  // },
  // // 第六个构造函数
  // updated(){
  //   console.log('updated',this.age,this.$refs.p.innerHTML);
  // },
  // 7. beforeDestroy
beforeDestroy() {
  console.log('第7个', '组件即将被销毁')
  console.log(this.$refs.artlistRef)  // 这里的artlistRef 是 子组件的ref
},
// 8. destroyed
destroyed() {
  console.log('第8个', '组件已经被销毁')
  console.log(this.$refs.artlistRef)  // 这里的artlistRef 是 子组件的ref
},

}
</script>

<style lang="less" scoped>
.left-container {
  background-color: cadetblue;
}
</style>
